<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频同步观看</title>
    <link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
    <div class="container">
        <h1>视频同步观看</h1>
        
        <div class="main-content">
            <div class="left-column">
                <div class="room-section">
                    <h2>房间信息</h2>
                    <div id="room-info">已连接到共享观看房间</div>
                </div>

                <div class="video-section">
                    <h2>视频播放</h2>
                    <div class="video-container">
                        <video id="video-player" controls></video>
                    </div>
                    
                    <div class="upload-section">
                        <input type="file" id="file-upload" accept="video/*">
                        <button id="upload-btn">上传视频</button>
                        <div id="upload-status"></div>
                    </div>
                    
                    <div class="control-section">
                        <button id="play-btn">播放</button>
                        <button id="pause-btn">暂停</button>
                        <div class="progress-container">
                            <input type="range" id="progress-bar" min="0" max="100" value="0" step="0.1">
                            <span id="time-display">00:00 / 00:00</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="right-column">
                <!-- 评分系统 -->
                <div class="rating-section">
                    <h2>电影评分</h2>
                    <div class="rating-display">
                        <div class="rating-item">
                            <span class="rating-label">总评分:</span>
                            <div class="star-rating" id="overall-stars">
                                <span class="star" data-value="1">&#9733;</span>
                                <span class="star" data-value="2">&#9733;</span>
                                <span class="star" data-value="3">&#9733;</span>
                                <span class="star" data-value="4">&#9733;</span>
                                <span class="star" data-value="5">&#9733;</span>
                            </div>
                            <span class="rating-value" id="overall-rating">0.0</span>
                            <span class="rating-count">(<span id="rating-count">0</span>人评分)</span>
                        </div>
                        <div class="rating-item">
                            <span class="rating-label">剧情:</span>
                            <div class="star-rating" id="plot-stars">
                                <span class="star" data-value="1">&#9733;</span>
                                <span class="star" data-value="2">&#9733;</span>
                                <span class="star" data-value="3">&#9733;</span>
                                <span class="star" data-value="4">&#9733;</span>
                                <span class="star" data-value="5">&#9733;</span>
                            </div>
                            <span class="rating-value" id="plot-rating">0.0</span>
                        </div>
                        <div class="rating-item">
                            <span class="rating-label">演员:</span>
                            <div class="star-rating" id="actors-stars">
                                <span class="star" data-value="1">&#9733;</span>
                                <span class="star" data-value="2">&#9733;</span>
                                <span class="star" data-value="3">&#9733;</span>
                                <span class="star" data-value="4">&#9733;</span>
                                <span class="star" data-value="5">&#9733;</span>
                            </div>
                            <span class="rating-value" id="actors-rating">0.0</span>
                        </div>
                        <div class="rating-item">
                            <span class="rating-label">音效:</span>
                            <div class="star-rating" id="sound-stars">
                                <span class="star" data-value="1">&#9733;</span>
                                <span class="star" data-value="2">&#9733;</span>
                                <span class="star" data-value="3">&#9733;</span>
                                <span class="star" data-value="4">&#9733;</span>
                                <span class="star" data-value="5">&#9733;</span>
                            </div>
                            <span class="rating-value" id="sound-rating">0.0</span>
                        </div>
                    </div>
                    
                    <div class="rating-form">
                        <h3>提交您的评分</h3>
                        <div class="rating-input-group">
                            <label>总评分:</label>
                            <div class="star-rating-input" id="overall-input">
                                <span class="star-input" data-value="1">&#9734;</span>
                                <span class="star-input" data-value="2">&#9734;</span>
                                <span class="star-input" data-value="3">&#9734;</span>
                                <span class="star-input" data-value="4">&#9734;</span>
                                <span class="star-input" data-value="5">&#9734;</span>
                            </div>
                            <input type="hidden" id="overall-rating-value" value="0">
                        </div>
                        <div class="rating-input-group">
                            <label>剧情评分:</label>
                            <div class="star-rating-input" id="plot-input">
                                <span class="star-input" data-value="1">&#9734;</span>
                                <span class="star-input" data-value="2">&#9734;</span>
                                <span class="star-input" data-value="3">&#9734;</span>
                                <span class="star-input" data-value="4">&#9734;</span>
                                <span class="star-input" data-value="5">&#9734;</span>
                            </div>
                            <input type="hidden" id="plot-rating-value" value="0">
                        </div>
                        <div class="rating-input-group">
                            <label>演员评分:</label>
                            <div class="star-rating-input" id="actors-input">
                                <span class="star-input" data-value="1">&#9734;</span>
                                <span class="star-input" data-value="2">&#9734;</span>
                                <span class="star-input" data-value="3">&#9734;</span>
                                <span class="star-input" data-value="4">&#9734;</span>
                                <span class="star-input" data-value="5">&#9734;</span>
                            </div>
                            <input type="hidden" id="actors-rating-value" value="0">
                        </div>
                        <div class="rating-input-group">
                            <label>音效评分:</label>
                            <div class="star-rating-input" id="sound-input">
                                <span class="star-input" data-value="1">&#9734;</span>
                                <span class="star-input" data-value="2">&#9734;</span>
                                <span class="star-input" data-value="3">&#9734;</span>
                                <span class="star-input" data-value="4">&#9734;</span>
                                <span class="star-input" data-value="5">&#9734;</span>
                            </div>
                            <input type="hidden" id="sound-rating-value" value="0">
                        </div>
                        <button id="submit-rating-btn">提交评分</button>
                        <div id="rating-status"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.socket.io/4.6.0/socket.io.min.js"></script>
    <script src="/static/js/app.js"></script>
</body>
</html>